<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Leon Sans - MASK + Tiling PIXI</title>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            outline: 0;
            margin: 0;
            padding: 0;
            cursor: move;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
</head>

<body>
    <script src="../dist/leon.js"></script>
    <script src="js/util.js"></script>
    <script>
        let container, loader, textures = [];
        let tiling = [], cur = -1;
        let leon, controll;

        function init() {
            generatePixi(0x000000);

            container = new PIXI.Container();
            stage.addChild(container);

            loader = new PIXI.Loader();
            loader.add('tile1', 'data/tile1.png')
            .add('tile2', 'data/tile2.png')
            .add('tile3', 'data/tile3.png')
            .add('tile4', 'data/tile4.png')
            .add('tile5', 'data/tile5.png')
            .add('tile6', 'data/tile6.png');

            loader.load((loader, resources) => {
                textures.push(resources.tile1.texture);
                textures.push(resources.tile2.texture);
                textures.push(resources.tile3.texture);
                textures.push(resources.tile4.texture);
                textures.push(resources.tile5.texture);
                textures.push(resources.tile6.texture);
                textures = shuffle(textures);

                loaded();
            });
        }


        function loaded() {
            controll = {
                align: {},
            };

            leon = new LeonSans({
                text: '012\n345',
                size: getSize(400),
                weight: 900,
                tracking: 1,
                leading: -1,
                align: 'center'
            });
            leon.on('update', (model) => {  
                update();
            });

            const gui = new dat.GUI();
            gui.add(leon, 'text');
            gui.add(leon, 'size', 10, 1000);
            gui.add(leon, 'weight', 1, 900);

            requestAnimationFrame(animate);
        }


        function update() {
            while(container.children[0]) { 
                container.removeChild(container.children[0]);
            }
            
            const total = leon.data.length;
            let i, d, color, line, pos;
            let j, j_total, lineW = leon.lineWidth;

            let graphics, tilingSprite;

            tiling = [];

            for (i = 0; i < total; i++) {
                d = leon.data[i];

                graphics = new PIXI.Graphics();
                container.addChild(graphics);

                tilingSprite = new PIXI.TilingSprite(
                    textures[getNum()],
                    d.rect.w * 2,
                    d.rect.h * 2
                );
                tilingSprite.x = d.rect.x - d.rect.w /2;
                tilingSprite.y = d.rect.y - d.rect.h / 2;
                tilingSprite.tileScale.x = tilingSprite.tileScale.y = leon.scale * 0.5;
                
                container.addChild(tilingSprite);

                tilingSprite.mask = graphics;
                tiling.push({
                    item: tilingSprite,
                    x: (Math.random() * 2 + 1 - 2) * 2,
                    y: (Math.random() * 2 + 1 - 2) * 2
                });

                j_total = d.lines.length;
                for (j = 0; j < j_total; j++) {
                    line = d.lines[j];
                    pos = d.lines[j].pos;

                    if (pos.type == 'a') {
                        graphics.lineStyle(0, color, 0);
                        graphics.beginFill(color);
                        graphics.drawCircle(pos.x, pos.y, pos.radius);
                        graphics.endFill();
                    } else if (pos.type == 'm') {
                        graphics.lineStyle(lineW, color, 1);
                        graphics.moveTo(pos.x, pos.y);
                    } else if (pos.type == 'l') {
                        graphics.lineTo(pos.x, pos.y);
                    } else if (pos.type == 'b') {
                        graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
                    }
                    if (line.closePath) {
                        graphics.closePath();
                    }
                }
                
            }
        }

        function animate(t) {
            requestAnimationFrame(animate);

            const x = (sw - leon.rect.w) / 2;
            const y = (sh - leon.rect.h) / 2;
            leon.position(x + moveX, y + moveY);

            const total = tiling.length;
            let i, p;
            for (i = 0; i < total; i++) {
                p = tiling[i];
                p.item.tilePosition.x += p.x * leon.scale;
                p.item.tilePosition.y += p.y * leon.scale;
            }

            renderer.render(stage);
        }

        function getNum() {
            cur += 1;
            if (cur == textures.length) {
                cur = 0;
            }
            return cur;
        }

        function shuffle(oldArray) {
            var newArray = oldArray.slice(),
                len = newArray.length,
                i = len, p, t;
            while (i--) {
                p = (Math.random()*len) | 0;
                t = newArray[i];
                newArray[i] = newArray[p];
                newArray[p] = t;
            }
            return newArray;
        }

        window.onload = () => {
            init();
        };
    </script>
</body>

</html>